<template>
  <div id="subclass-info-list" class="card col-12 px-0 mt-5">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb pb-0">
        <li class="breadcrumb-item ms-1" aria-current="page">基础数据</li>
        <li class="breadcrumb-item" aria-current="page">
          <router-link to="/h5/data/subclasses">舱位信息</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">详情</li>

        <span class="ms-auto me-1" @click.stop="back()">返回</span>
      </ol>
    </nav>
    <template v-if="detail !== null">
      <div class="card-body">
        <dl class="row">
          <dt class="col-4 text-end">航司</dt>
          <dd class="col-8">{{ detail.carrier }}</dd>
          <dt class="col-4 text-end">舱位</dt>
          <dd class="col-8">
            {{ detail.subclass }}
            <span v-if="detail.cabinType === 10" class="small">头等舱</span>
            <span v-if="detail.cabinType === 20" class="small">商务舱</span>
            <span v-if="detail.cabinType === 30" class="small">经济舱</span>
            <span v-if="detail.cabinType === 40" class="small">超级经济舱</span>
          </dd>
          <dt class="col-4 text-end">乘客</dt>
          <dd class="col-8">
            <span v-if="detail.psgType === 0">成人</span>
            <span v-if="detail.psgType === 1">儿童</span>
            <span v-if="detail.psgType === 2">婴儿</span>
            <span v-if="detail.psgType === 8">伤残军人/警察</span>
          </dd>
          <dt class="col-4 text-end">描述</dt>
          <dd class="col-8">{{ detail.subclassDesc }}</dd>
          <dt class="col-4 text-end">折扣</dt>
          <dd class="col-8">{{ detail.discount }}</dd>
          <dt class="col-4 text-end">代理费</dt>
          <dd class="col-8">{{ detail.commission }}</dd>
          <dt class="col-4 text-end">OPEN</dt>
          <dd class="col-8">{{ showAllowDesc(detail.openAllowed) }}</dd>
          <dt class="col-4 text-end">自愿签转</dt>
          <dd class="col-8">{{ showAllowDesc(detail.endorsable) }}</dd>
        </dl>
      </div>
      <div class="card-body bg-info text-white py-0 text-center">
        自 愿 退 票
      </div>
      <table class="table table-sm">
        <thead>
          <tr class="small">
            <th class="">{{ this.refundLabel1 }}</th>
            <th class="">{{ this.refundLabel2 }}</th>
            <th class="">{{ this.refundLabel3 }}</th>
            <th class="">{{ this.refundLabel4 }}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="text-center">
              {{ showFeeRateDesc(detail.refundFeeRate1) }}
            </td>
            <td class="text-center">
              {{ showFeeRateDesc(detail.refundFeeRate2) }}
            </td>
            <td class="text-center">
              {{ showFeeRateDesc(detail.refundFeeRate3) }}
            </td>
            <td class="text-center">
              {{ showFeeRateDesc(detail.refundFeeRate4) }}
            </td>
          </tr>
        </tbody>
      </table>
      <div class="card-body bg-info text-white py-0 text-center">
        自 愿 变 更
      </div>
      <table class="table table-striped table-sm">
        <thead>
          <tr class="small">
            <th class="">{{ this.changeLabel1 }}</th>
            <th class="">{{ this.changeLabel2 }}</th>
            <th class="">{{ this.changeLabel3 }}</th>
            <th class="">{{ this.changeLabel4 }}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="text-center">
              {{ showFeeRateDesc(detail.changeFeeRate1) }}
            </td>
            <td class="text-center">
              {{ showFeeRateDesc(detail.changeFeeRate2) }}
            </td>
            <td class="text-center">
              {{ showFeeRateDesc(detail.changeFeeRate3) }}
            </td>
            <td class="text-center">
              {{ showFeeRateDesc(detail.changeFeeRate4) }}
            </td>
          </tr>
        </tbody>
      </table>
      <div class="card-footer row" v-if="isDataAdmin">
        <a
          href="javascript:void(0)"
          @click.stop="editSubclass()"
          class="btn btn-primary mb-2"
          >修改</a
        >
        <a
          href="javascript:void(0)"
          @click.stop="copySubclass()"
          class="btn btn-secondary"
          >复制</a
        >
      </div>
      <div>
        备注：成人舱位的折扣数仅供参考；儿童、婴儿、伤残军人/警察舱位的折扣数表示相同成人舱位的价格的百分数。
      </div>
    </template>
  </div>
</template>

<script>
import $ from "jquery";
import {
  getSubclassInfo,
  searchFlightConditionTimeWindow,
} from "@/api/basic-data.js";

export default {
  data() {
    return {
      id: 0,
      detail: null,
      timeWindows: [],

      refundLabel1: "退票手续费1",
      refundLabel2: "退票手续费2",
      refundLabel3: "退票手续费3",
      refundLabel4: "退票手续费4",
      changeLabel1: "改签手续费1",
      changeLabel2: "改签手续费2",
      changeLabel3: "改签手续费3",
      changeLabel4: "改签手续费4",
    };
  },
  computed: {
    isDataAdmin() {
      return this.$store.getters.isDataAdmin;
    },
  },
  mounted: function () {
    this.id = parseInt(this.$route.params.id);
    this.searchDetail();
  },
  watch: {
    timeWindows() {
      this.changeTimeWindowLabels();
    },
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    back: function () {
      this.$router.go(-1);
    },
    searchDetail: function () {
      getSubclassInfo(this.id, (v) => {
        this.detail = v;

        searchFlightConditionTimeWindow(
          {
            carrier: this.detail.carrier,
          },
          (v) => {
            this.timeWindows = v;
          }
        );
      });
    },
    editSubclass: function () {
      this.$router.push("/h5/data/subclass?id=" + this.id);
    },
    copySubclass: function () {
      this.$router.push("/h5/data/subclass?id=" + this.id + "&mode=1");
    },
    changeTimeWindowLabels: function () {
      for (let t of this.timeWindows) {
        switch (t.windowOrder) {
          case 1:
            this.refundLabel1 = this.showTimeWindowDesc(t);
            this.changeLabel1 = this.showTimeWindowDesc(t);
            break;
          case 2:
            this.refundLabel2 = this.showTimeWindowDesc(t);
            this.changeLabel2 = this.showTimeWindowDesc(t);
            break;
          case 3:
            this.refundLabel3 = this.showTimeWindowDesc(t);
            this.changeLabel3 = this.showTimeWindowDesc(t);
            break;
          case 4:
            this.refundLabel4 = this.showTimeWindowDesc(t);
            this.changeLabel4 = this.showTimeWindowDesc(t);
            break;
        }
      }
    },
    showTimeWindowDesc: function (t) {
      let desc = "＠";
      if (t.maxHours != 0) {
        let desc0 = t.maxHours + "H";
        if (t.maxIncluded == 1) {
          desc0 += " => ";
        } else {
          desc0 += " > ";
        }
        desc = desc0 + desc;
      }

      if (t.minHours != 0) {
        let desc0;
        if (t.minIncluded == 1) {
          desc0 = " >= ";
        } else {
          desc0 = " > ";
        }
        desc0 += t.minHours + "H";
        desc = desc + desc0;
      }

      return desc;
    },
    showFeeRateDesc: function (feeRate) {
      if (feeRate == 0) {
        return "免费";
      } else {
        return feeRate + "%";
      }
    },
    showAllowDesc: function (status) {
      if (status === 0) {
        return "不允许";
      } else if (status === 1) {
        return "允许";
      } else {
        return status;
      }
    },
  },
};
</script>
